<template>
    <div class="update-img"
        v-loading="loading"
        element-loading-text="上传中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
    >
        <div style="float:left" class="img-box " v-if="imgUrl" >
            <img  class="img"  mode="aspectFit" v-show="imgUrl" :src="imgUrl?imgUrl:''" />
            <i class="clear-icon" @click="clearImg(index)">×</i>
        </div>
        <div style="float:left" class="img-box float-left add-img text-center"  v-else>
            <label for="imgInput">+</label>
            <input style="opacity:0;" type="file" id="imgInput" @change='addImgEvent'  accept="image/png, image/jpeg, image/jpg">
        </div>
    </div>
</template>

<script>
import * as api from './../api/api' 
export default {
    props:{
        imgUrl:{
            default:'',
            type:String
        },
        index:{
            default:0,
            type:Number
        }
    },
    data() {
        return{ 
            loading:false,
        }
    },
    methods: {
        clearImg(index){
            this.$emit('clearImg',index,this.imgUrl);
        },
        addImgEvent(event){
            var vm = this;
            var img1 = event.target.files[0];
            var size = img1.size/1024;
            // if(size>200){
            //     vm.$message({
            //     showClose: true,
            //     type: 'error',
            //     message: '图片大小不能大于200KB'
            //     });
            //     return false;
            // } 
            let imgFile;
            let reader = new FileReader();   //html5读文件
                reader.readAsDataURL(img1); //转BASE64    
                reader.onload=function(e) {    //读取完毕后调用接口
                imgFile = e.target.result; 
                let obj={
                    source: "photo", 
                    files : [imgFile],
                    filenames:[''] 
                }
                vm.loading=true;
                api.uploadFile(obj).then(res=>{
                    vm.loading=false;
                    if(res.data.code==300000&&res.data.data){
                        vm.$emit('change',res.data.data[0]);
                        vm.$message({
                            message: '上传成功！',
                            type: 'success'
                        });
                    }
                }).catch(err=>{
                    vm.loading=false;
                })
                event.target.value='';
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.update-img{
    display:inline-block;
    margin-left:10px;
    .img-box{
        position:relative;
        display:inline-block;
        height:135px;
        width:135px;
        color:#DEDEDE;
        margin-right:20px;
        padding:20px;
        box-sizing:border-box;
        .img{
            height:100%;
            width:100%;
        }
        .clear-icon{
            position:absolute;
            top:8px;
            right:8px;
            width: 26px;
            height: 26px;
            text-align: center;
            line-height: 26px;
            font-size:20px;
            border-radius:50%;
            background: #ec514a;
            color:#fff;
            cursor: pointer;
        }
    }
    .add-img{ 
        line-height:110px;
        border:1px dotted #DEDEDE;
        label{
            font-size:40px;
            display:inline-block;
            text-align:center;
            width:100%;
            height:100%;
        }
        input{
            position:absolute;
            top:0;
            left:0;
            width:0;
            height:0;
        }
    }
}
</style>
